<template>
  <div class="dialog-container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.title" width="769px">
      <el-form ref="tenantDialogFormRef" :model="state.ruleForm" :rules="rules" label-width="90px" size="default">
        <el-row :gutter="35">
          <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
            <el-form-item label="企业名称" prop="tenantName">
              <el-input v-model="state.ruleForm.tenantName" clearable placeholder="请输入企业名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="state.ruleForm.contact" clearable placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="state.ruleForm.phone" clearable placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
            <el-form-item label="企业状态" prop="active">
              <el-switch v-model="state.ruleForm.active" :active-value="1" :inactive-value="0" active-text="启用"
                inactive-text="禁用" inline-prompt></el-switch>
            </el-form-item>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
            <el-form-item label="企业地址" prop="address">
              <el-input v-model="state.ruleForm.address" maxlength="150" clearable placeholder="请输入地址信息"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
            <el-form-item label="企业描述" prop="remarks">
              <el-input v-model="state.ruleForm.remarks" maxlength="150" placeholder="请输入企业描述" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="default" @click="onCancel">取 消</el-button>
          <el-button size="default" type="primary" @click="onSubmit(tenantDialogFormRef)">
            {{ state.dialog.submitTxt }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemTenantDialog">
import { nextTick, reactive, ref } from 'vue';
import { tenantApi } from '/@/api/sys/tenant';
import type { FormInstance, FormRules } from 'element-plus';
import type { TenantType } from '/@/api/sys/types';
import { ElMessage } from 'element-plus';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const tenantDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    tenantName: '', // 企业名称
    contact: '', // 联系人
    phone: '', // 手机号
    address: '', // 地址信息
    active: 1, // 用户状态
    remarks: '', // 用户描述
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});

const backupFormData = JSON.parse(JSON.stringify(state.ruleForm));

const rules = reactive<FormRules>({
  tenantName: [{ required: true, message: '不能为空', trigger: 'blur' }],
  phone: [{ required: true, message: '不能为空', trigger: 'blur' }],
  contact: [{ required: true, message: '不能为空', trigger: 'blur' }]
});
// 打开弹窗
const openDialog = (type: string, row: TenantType) => {
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  if (type === 'edit') {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.dialog.title = '修改企业';
    state.dialog.submitTxt = '修 改';
  } else {
    state.dialog.title = '新增企业';
    state.dialog.submitTxt = '新 增';
    // 清空表单，此项需加表单验证才能使用
    nextTick(() => {
      state.ruleForm = backupFormData;
    });
  }
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
  state.ruleForm = backupFormData;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (state.dialog.type === 'add') {
        tenantApi()
          .addRecord(state.ruleForm)
          .then((res) => {
            closeDialog();
            ElMessage.success(res.msg || '新增成功');
            emit('refresh');
          });
      } else if (state.dialog.type === 'edit') {
        tenantApi()
          .updateRecord(state.ruleForm)
          .then((res) => {
            closeDialog();
            ElMessage.success(res.msg || '修改成功');
            emit('refresh');
          });
      }
    }
  });
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>